<template>
  <div>
    <div class="page-header-wrap">
      <Header :search.sync="searchProp" @confirm="queryData" />
      <a-tabs
        v-model:activeKey="searchProp.status"
        @change="queryData(searchProp)"
      >
        <a-tab-pane key="0" tab="未开始"></a-tab-pane>
        <a-tab-pane key="1" tab="进行中"></a-tab-pane>
        <a-tab-pane key="2" tab="已完成"></a-tab-pane>
        <a-tab-pane key="3" tab="异常订单"></a-tab-pane>
      </a-tabs>
    </div>
    <div class="page-content-wrap">
      <a-table
        :columns="columns"
        :data-source="resState.list"
        :pagination="pageInfo"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'paymode'">
            <span>
              <a-tag v-if="record.paymode == 1" color="blue"> 线下支付 </a-tag>
              <a-tag v-else color="green">在线支付</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'sendmode'">
            <span>
              <a-tag v-if="record.sendmode == 1" color="blue"> 店内用餐 </a-tag>
              <a-tag v-else color="green">店铺配送</a-tag>
            </span>
          </template>
          <template v-else-if="column.key === 'totalAmount'">
            ￥{{ record.totalAmount }}
          </template>
          <template v-else-if="column.key === 'sendTime'">
            {{ record.sendTime || '立即出餐' }}
          </template>
          <template
            v-else-if="column.key === 'action' && searchProp.status != 3"
          >
            <span>
              <a-button type="link" @click="showDetail(record)">详情</a-button>
              <a-button type="link" @click="showCancel(record)">
                取消订单
              </a-button>
              <a-popconfirm
                v-if="record.iscancel == 1"
                title="是否同意用户取消订单？"
                ok-text="是"
                cancel-text="否"
                @confirm="showCancel(record)"
              >
                <a-button type="link">审核</a-button>
              </a-popconfirm>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <ModalDetail
      v-model:visible="acState.detailVisible"
      v-model:current="acState.current"
      @query="() => queryData(searchProp)"
    />
    <a-modal
      v-model:visible="cancelModalVisible"
      :title="'取消订单【' + cancelModal.orderNum + '】'"
      @ok="handleCancel"
    >
      <a-textarea
        v-model:value="cancelModalRemark"
        placeholder="请输入订单取消原因"
        :auto-size="{ minRows: 2, maxRows: 5 }"
      />
    </a-modal>
  </div>
</template>

<script setup>
import { SmileOutlined, DownOutlined } from '@ant-design/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, onBeforeRouteUpdate } from 'vue-router'
import Header from './components/Header.vue'
import ModalDetail from './components/ModalDetail.vue'
import { selectPageList, cancel } from '@/api/order'
import { usePager } from '@/hooks'
import { useActions } from '@/hooks/actions'
import { message } from 'ant-design-vue'

const columns = [
  {
    title: '当日编号',
    dataIndex: 'orderNum',
    key: 'orderNum',
  },
  {
    title: '订单号',
    dataIndex: 'orderCode',
    key: 'orderCode',
  },
  {
    // 1:线下支付 2:在线支付
    title: '支付方式',
    dataIndex: 'paymode',
    key: 'paymode',
  },
  {
    // 1:店内用餐 2:店铺配送
    title: '配送方式',
    dataIndex: 'sendmode',
    key: 'sendmode',
  },
  {
    title: '商品数',
    dataIndex: 'totalNum',
    key: 'totalNum',
  },
  {
    title: '总金额',
    dataIndex: 'totalAmount',
    key: 'totalAmount',
  },
  {
    title: '下单时间',
    key: 'orderTime',
    dataIndex: 'orderTime',
  },
  {
    title: '期望配送时间',
    key: 'sendTime',
    dataIndex: 'sendTime',
  },
  {
    title: '操作',
    key: 'action',
  },
]
const { pageInfo, queryData, resState } = usePager(selectPageList)
const { acState, showDetail, showRemove } = useActions()

const searchProp = reactive({
  status: '1',
})

const activeKey = ref('1')

onBeforeRouteUpdate((to) => {
  if (to.query) {
    to.query.type == 'detail' && showDetail({ id: to.query.id })
  }
})

onMounted(async () => {
  queryData(searchProp)
})

$myEmit.$on('query', () => queryData(searchProp))

const cancelModalVisible = ref(false)
const cancelModalRemark = ref('')
const cancelModal = ref({})

const showCancel = (row) => {
  cancelModalVisible.value = true
  cancelModal.value = row
}

const handleCancel = async () => {
  const { data, code } = await cancel({
    id: cancelModal.value.id,
    text: cancelModalRemark.value,
  })
  if (code !== 300) return
  message.success('订单取消成功！')
  cancelModalVisible.value = false
  cancelModalRemark.value = ''
  queryData(searchProp)
}
</script>

<style lang="less">
.page-header-wrap {
  padding-bottom: 0;
  .ant-tabs-nav {
    margin: 0;
  }
}
</style>
